<template>
  <div style="padding:30px;">
    <el-form
      ref="form"
      v-loading="listLoading"
      :model="data"
      label-width="100px"
      fit
      highlight-current-row
      :rules="rules"
    >
      <el-form-item label="学号:" prop="studentid">
        <el-input v-model="data.studentid" />
      </el-form-item>
      <el-form-item label="姓名:" prop="name">
        <el-input v-model="data.name" />
      </el-form-item>
      <el-form-item label="学院:" prop="college">
        <el-input v-model="data.college" />
      </el-form-item>
      <el-form-item label="班级:" prop="classes">
        <el-input v-model="data.classes" />
      </el-form-item>
      <el-form-item label="学生状态:" prop="status">
        <el-select v-model="data.status" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期:">
        <el-input v-model="data.birthday" />
      </el-form-item>
      <el-form-item label="备注:">
        <el-input v-model="data.remakes" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="sass" scoped>

</style>

<script>
import { getStudentInfoByStudentId, updateStudentInfoByStudentId } from '@/api/studentsimpleinfo'
import router from '@/router'
export default {
  data() {
    return {
      listLoading: true,
      data: {
        studentid: '',
        name: '',
        college: '',
        classes: '',
        status: '',
        birthday: '',
        resource: '',
        remakes: ''
      },
      options: [{
        value: '正常',
        label: '正常'
      }, {
        value: '休学',
        label: '休学'
      }, {
        value: '退学',
        label: '退学'
      }],
      value: '',
      studid: '',
      rules: {
        name: [
          { required: true, message: '请输入学生姓名!', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在3到5个字符内', trigger: 'blur' }
        ],
        studentid: [
          { required: true, message: '请输入学生学号!', trigger: 'blur' },
          { min: 9, max: 12, message: '长度在9到12个字符内!', trigger: 'blur' }
        ],
        college: [
          { required: true, message: '请输入学院名!', trigger: 'blur' }
        ],
        classes: [
          { required: true, message: '请输入班级!', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择学生状态!', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.studid = this.$route.params.studentid
    this.fetchData(this.studid)
  },
  methods: {
    // 获取数据
    fetchData(studentid) {
      this.listLoading = true
      getStudentInfoByStudentId(studentid).then(response => {
        console.log(response)
        this.data = response.data.items[0]
        console.log(this.data)
        this.listLoading = false
      })
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateStudentInfoByStudentId(this.studid, this.data).then((res) => {
            this.$message({
              type: res.code === 20000 ? 'success' : 'error',
              message: res.message
            })
            router.push('/student/table')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
